<template>
    <div class="app-header">
        <div class="container">
            <h1 class="logo">
                <RouterLink to="/"/>
            </h1>
            <AppHeaderNav/>

            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" placeholder="搜一搜">
            </div>
            <div class="cart">
                <el-popover placement="bottom-end" width="400" trigger="hover"
                            v-if="$store.getters.validTotal&&$route.path!=='/cart'">
                    <HeaderCart/>
                    <RouterLink to="/cart" class="curr" slot="reference">
                        <i class="iconfont icon-cart"></i>
                        <em>{{$store.getters.validTotal}}</em>
                    </RouterLink>
                </el-popover>
                <a v-else class="curr" slot="reference">
                    <i class="iconfont icon-cart"></i>
                    <em>{{$store.getters.validTotal}}</em>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    import AppHeaderNav from "@/components/app-header-nav";
    import HeaderCart from "@/components/app-header-cart";

    export default {
        name: "AppHeader",
        components: {HeaderCart, AppHeaderNav},
        created() {
            //更新列表信息
            this.$store.dispatch('cart/findCartList')
        }
    }
</script>

<style scoped lang="less">

    .app-header {
        background: #fff;

        .container {
            display: flex;
            align-items: center;
        }

        .logo {
            width: 200px;

            a {
                display: block;
                height: 132px;
                width: 100%;
                text-indent: -9999px;
                background: url("../assets/images/logo.png") no-repeat center 18px / contain;
            }
        }

        .search {
            width: 170px;
            height: 32px;
            line-height: 32px;
            position: relative;
            border-bottom: 1px solid #e7e7e7;

            .icon-search {
                font-size: 18px;
                margin-left: 5px;
            }

            input {
                width: 140px;
                padding-left: 5px;
                color: #666;
                border: none;
            }
        }

        .cart {
            width: 50px;

            .curr {
                height: 32px;
                line-height: 32px;
                text-align: center;
                position: relative;
                display: block;

                .icon-cart {
                    font-size: 22px;
                }

                em {
                    font-style: normal;
                    position: absolute;
                    right: 0;
                    top: 0;
                    padding: 1px 6px;
                    height: 16px;
                    line-height: 16px;
                    background: @helpColor;
                    color: #fff;
                    font-size: 12px;
                    border-radius: 10px;
                    font-family: Arial;
                }
            }
        }
    }

</style>